import React, { PureComponent } from 'react'
{/* label标签 - 在label中写input并给input绑定id label有个for属性， id和for的值相同时，点击label内文字会聚焦到input框 */}
export class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      username: '',
      password: '',
      isAgree: false,
      hobbies: [
        {label: '唱', value: 'sing', checked: false},
        {label: '跳', value: 'dance', checked: false},
        {label: 'rap', value: 'rap', checked: true},
      ],
      favoriteFruit: 'orange',
      friutsArr:['banana']
    }
  }

  handleInput(event) {
    // 注意：只有type = checkbox,radio,file,number不是从event.target.value中取值的
    // 可以判断 input的type属性来决定是从 value中取值还是 checked中取值
    const { type, id: keyName, value, checked } = event.target
    const newValue = type === 'checkbox' ? checked : value
    this.setState({
      [keyName] : newValue
    })
  }
  // 处理checkbox 复选
  handleHobbiesChange(e,index) {
    // 引用数据类型会进行浅层比较
    const hobbies = [...this.state.hobbies]
    hobbies[index].checked = e.target.checked
    this.setState({hobbies})
  }
  handleSubmit(event) {
    // 1.阻止form表单中按钮的默认行为
    event.preventDefault()
    // 2.拿到数据
    console.log(this.state);
    // 3.发送网络请求
  }

  handleSelect(event) {
    // 处理select复选时,可以从 event.target.selectedOptions中拿到一个伪数组(拥有length和索引，不能使用数组的方法)(存放的是被选中的HTML元素)
    // 伪数组转为数组的常用方法： 1. Array.from() 2. ...扩展运算符 3.Array.prototype.slice.call()
    const friutsArr = [...event.target.selectedOptions].map(item => item.value)
    this.setState({friutsArr})
    console.log(friutsArr);
  }
  render() {
    const {username,password,isAgree,hobbies, favoriteFruit,friutsArr} = this.state
    return (
      <div>
        <form >
          {/* 1.用户名和密码 */}
          <label htmlFor="username">
            用户名:
            <input
              id='username'
              value={username}
              onChange={e => this.handleInput(e)}
              type="text"
            />
          </label>
          <label htmlFor="password">
            密码:
            <input
              type="password"
              id='password'
              value={password}
              onChange={e => this.handleInput(e)}
            />
          </label>
          {/* 2.checkbox单选 */}
          <div>
            <label htmlFor="isAgree">
              <input type="checkbox"
                id='isAgree'
                onChange={e => this.handleInput(e)}
                checked={isAgree}
              />
              同意协议
            </label>
          </div>

          {/* 3.checkbox复选 */}
          <div>
            爱好：
            {hobbies.map((item, index) => {
              return (
                <label htmlFor={ item.value} key={item.value}>
                  <span style={{color: item.checked ? 'blue' : ''}}>{item.value}</span>
                  <input
                    type="checkbox"
                    id={item.value}
                    checked={item.checked}
                    onChange={e => this.handleHobbiesChange(e,index)}
                  />
                </label>
              )
            })}
          </div>
          {/* 4.select单选 */}
          <label htmlFor="favoriteFruit">
              喜欢的水果：
            <select value={favoriteFruit} onChange={e => this.handleInput(e)} id="favoriteFruit" >
              <option value="apple">苹果🍎</option>
              <option value="banana">香蕉🍌</option>
              <option value="orange">橘子🍊</option>
            </select>
          </label>
          {/* 5.select复选 */}
          <select id="fruit" value={friutsArr} multiple onChange={e => this.handleSelect(e)}>
            <option value="apple">苹果🍎</option>
            <option value="banana">香蕉🍌</option>
            <option value="orange">橘子🍊</option>
          </select>
          <div><button type='submit' onClick={e => this.handleSubmit(e)}>submit</button></div>
        </form>
      </div>
    )
  }
}

export default App